"use client";
import React, { ErrorInfo } from "react";
import { ErrorBoundary, FallbackProps } from "react-error-boundary";
import ErrorFallback from "./ErrorFallback";

function ThrowError(): React.JSX.Element {
  throw new Error("Page3Child 引发错误");
}

function onError(error: Error, info: ErrorInfo) {
  console.log("error.message", error.message);
  console.log("info.componentStack:", info.componentStack);
}

function Page3Child() {
  const [throwError, setThrowError] = React.useState(false);

  const onclick = () => {
    setThrowError((preThrowError) => !preThrowError);
  };

  const onReset = () => {
    setThrowError((prev) => !prev);
  };

  function CustomeH5(): React.JSX.Element {
    console.log("加载CustomeH5");
    return <h5>Page3Child</h5>;
  }

  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onError={onError}
      onReset={onReset}
    >
      <div style={{ backgroundColor: "#DEB331" }}>
        <CustomeH5 />
        <button onClick={onclick}>抛出异常</button>
        {throwError && <ThrowError />}
      </div>
    </ErrorBoundary>
  );
}
export default Page3Child;
